<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        IPPI Admin Page
        <small>Option</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <!-- Main row -->
    <div class="row">
        <div class="col-md-12">
    
            <!-- Option Tabs -->
            <div class="nav-tabs-custom">
                <!-- Main Tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_general" data-toggle="tab">General</a></li>
                    <li><a href="#tab_pages" data-toggle="tab">Pages</a></li>
                </ul>
                <!-- /Main Tabs -->
                
                <!-- Tab Content -->
                <div class="tab-content">
                    
                    <!-- General -->
                    <div class="tab-pane active" id="tab_general">
                        <label>Global Limit</label>
                        <div class="input-group input-group-sm col-md-2">
                            <input type="text" class="form-control" name="global_limit" />
                            <span class="input-group-btn">
                                <button class="btn btn-info btn-flat" type="button">Save</button>
                            </span>
                        </div>
                    </div>
                    <!-- /General -->
                    
                    <!-- Pages -->
                    <div class="tab-pane" id="tab_pages">
                        <div class="box-body">
                            <div class="box-group" id="accordion">
                                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                <div class="panel box box-primary">
                                    <div class="box-header">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#about_us">About Us</a>
                                        </h4>
                                    </div>
                                    <div id="about_us" class="panel-collapse collapse in">
                                        <div class="box-body">
                                            <form role="form">
                                                <div class="form-group">
                                                    <label>Page Title</label>
                                                    <input type="text" class="form-control" placeholder="Title of page ..."/>
                                                </div>

                                                <h2 class="page-header">Kata Pengantar</h2>
                                                <div class="form-group">
                                                    <label>Header</label>
                                                    <input type="text" class="form-control" placeholder="Header title ..."/>
                                                </div>
                                                <div class="form-group">
                                                    <label>Text</label>
                                                    <textarea id="editor1" name="text" placeholder="Type your text here ..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>  
                                                </div>
                                                <div class="form-group"> 
                                                    <div class="checkbox">
                                                        <label><input type="checkbox" class="flat-red" />&nbsp;&nbsp;<strong>Show Image</strong></label>                                                
                                                    </div>
                                                    <div class="checkbox">
                                                        <label><input type="checkbox" class="flat-red" />&nbsp;&nbsp;<strong>Show Quotes</strong></label>                                                
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel box box-danger">
                                    <div class="box-header">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#donation">Donation</a>
                                        </h4>
                                    </div>
                                    <div id="donation" class="panel-collapse collapse">
                                        <div class="box-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel box box-success">
                                    <div class="box-header">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#elibrary">E-Library</a>
                                        </h4>
                                    </div>
                                    <div id="elibrary" class="panel-collapse collapse">
                                        <div class="box-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Pages -->
                    
                </div>
                <!-- /Tab Content -->
            </div>
            <!-- /Option Tabs -->
            
        </div>
    </div>
    <!-- /.row (main row) -->
</section>
<!-- /.content -->